<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>RoomSpot</title>
<link type="text/css" rel="stylesheet" media="all" href="css/style.css" />
<!-- load the correct google maps api for this domain -->
<script type="text/javascript">
var googleMapsApiKeys = [];
googleMapsApiKeys['http://127.0.0.1/'] = '';
googleMapsApiKeys['http://roomspot.kpozin.net/'] = 'ABQIAAAA_lyfK3spYhQQHhN6X1RxaxTX4aY3tesKg_TsDZeml6r3QYQO9xRyha4tujXjsYedRCSybsogP7c1Gg';
googleMapsApiKeys['http://roomspot.googlecode.com/'] = 'ABQIAAAA_lyfK3spYhQQHhN6X1RxaxSpCHRgaUylQs5vfMEFFkGnJ9R42BSD8gBoqlTL0b1Bt1Q1oULa-jYatw';
document.write('<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=' + googleMapsApiKeys[location.protocol+'//'+location.host+'/'] + '" type="text/javascript"></scr' +'ipt>');
</script>
<script
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script src="jquery.cookie.js"></script>
<script src="json2.js"></script>
<script src="roomspot.js"></script>
<script src="classdefs.js"></script>
<script src="filters.js"></script>
<script src="color.js"></script>
<script src="markers.js"></script>
<script src="http://gmaps-utility-library-dev.googlecode.com/svn/tags/mapiconmaker/1.1/src/mapiconmaker.js"></script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="appContainer" class="clearfix">
<div id="helpPanel" class="fullWidth hidden">
<div id="closeHelp" onclick="closeHelp();" title="Close">X</div>
<h3>Welcome to RoomSpot! &nbsp; Here's what you need to know:</h3>
<ul>
<li>If you're not sure what something is, point to it and you'll probably see a tooltip.</li>
<li><img src="graphics/samplemarker.png" style="float:right; margin-left:0.5em;"/>A pin shows how many rooms within a building match your search criteria. 
Click on a pin to highlight the building's rooms in the results panel on the right.</li>
<li>Keyword search will search the name of the building, the type of room, and the name/number of the room. Separate keywords with spaces.</li>
<li>If <em>Filter by view</em> is checked, then the list of matching buildings will only show buildings that can be seen in the current map viewport.
Panning and zooming will change the results.</li>
<li>If <em>Filter by view</em> is <em>not</em> checked, then the results list will include <em>all</em> matching buildings, including the ones that are currently off-screen. 
You can then click on a building name to center the map around it.</li>
<li>If you'd like to see this message again, just click the <img id="helpIconPreview" src="graphics/help-25.png" alt="?"/> icon.</li>
</ul>
</div>
<p class="appInfo">Konstantin Pozin '10, Michael Nock '11</p>
<h2 id="appTitle">Harvard RoomSpot</h2>
<div id="searchPanel" class="fullWidth">
<img id="showHelpBtn" src="graphics/help-25.png" alt="Show instructions" title="Show instructions" onclick="showHelp();"/>
<form id="searchForm">
<label for="inputSeats">Number of people</label>
<input type="text" class="digitsOnly" maxlength="4" id="inputSeats" onblur="updateFilters()" onchange="updateFilters()" onkeyup="updateFilters();"/>
<label for="inputProjector">Projector?</label>
<input type="checkbox" id="inputProjector" onchange="updateFilters()"/>
<label for="inputComputer">Computer?</label>
<input type="checkbox" id="inputComputer" onchange="updateFilters()"/>
<span title="Enter keywords separated by spaces. 
Search fields include building name, room type, and room name/number.">
<label for="inputKeywords">Keywords</label>
<input type="text" id="inputKeywords" onblur="updateFilters()" onchange="updateFilters()" onkeyup="updateFilters()"/></span>
<div id="divBounds" title="Only list buildings visible in the current map view. 
When this is unchecked, clicking on a building entry will center the map on the building."><label for="inputBounds">Filter by view</label>
<input type="checkbox" id="inputBounds" checked="checked" onchange="updateFilters()"/></div>
</form>
</div>
<div id="console" title="Console" class="hidden"></div>
<div id="mapContainer">
<div id="mapCanvas"></div>
</div>
<div id="resultsContainer">
<div id="summary"></div>
<div id="resultsPanel"></div>
</div>
</div>
<div id="footer">
<p class="credits">Libraries: <a href="http://www.jquery.com"
  target="_blank">jQuery</a>, <a href="http://www.json.org"
  target="_blank">JSON</a>, <a href="http://code.google.com/apis/maps/"
  target="_blank">Google Maps API</a>, <a
  href="http://gmaps-utility-library-dev.googlecode.com/" target="_blank">Google
Maps Icon Maker</a> &nbsp;&nbsp;&nbsp; Data: <a
  href="http://ims.fas.harvard.edu/classrooms/" target="_blank">Harvard
Media &amp; Technology Services</a>, <a
  href="http://wiki.cs50.net/HarvardMaps_API/" target="_blank">HarvardMaps
API</a></p>
<p class="credits"><a href="http://roomspot.googlecode.com" target="_blank">Source code</a> available under <a href="http://roomspot.googlecode.com/svn/trunk/roomspot-php/LICENSE.txt" target="_blank">MIT License</a>.</p>
<p id="toggleConsole" onclick="toggleConsole();">Toggle console</p>
</div>

</body>
</html>